<!-- 退货管理--退货单详情 -->
<template>
  <div class="auth-product return-goods-box">
    <el-container class="partDetails is-vertical">
      <read-form
        class="custom-info"
        :record-form="returnGoodsInfoColumns"
        :record-data="headerInfo">
        <template slot="recordInfoslot">
          <div
            class="solt-info">
            <span class="left-span">
              退货产品总数：
              <span class="right-span">{{ headerInfo.orderDetailCount }}</span>
            </span>
            <span>
              品种数：
              <span>{{ headerInfo.returnCount }}</span>
            </span>
            <span>
              金额合计 （元）:
              <span>
                <span class="price">{{ headerInfo.returnAmount | getFormatterPrice }}</span>
              </span>
            </span>
          </div>
        </template>
      </read-form>
      <el-editable
        class="distributor-edit-box"
        :data="returnGoodsList"
        height="400"
        :key="isRed"
        v-loading="tableLoading"
        :columns="activeTableColumns"
      >
        <template
          slot="default-registrationNumber"
          slot-scope="scope">
          <el-button
            :disabled="!scope.row.registrationNumber||!scope.row.registrationId"
            v-html="regisNoButton(scope.row, 'registration')"
            @click="showPdfRegistion(scope.row.registrationId)"
            type="text"
          />
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <pagination
        ref="page"
        :request-func="getList"
        @returnData="getTableData"
      />
    </el-container>
  </div>
</template>

<script>
import {
  statusArr,
  orderTypeData,
  invoiceFlagObj,
  returnGoodsNoRedTableColumns,
  returnGoodsRedTableColumns,
  returnGoodsInfoColumns
} from './const'
import Pagination from '@components/custom-pagination'
import ReadForm from '@/moduleComponents/beforeSettle/common/read-form'
import {
  returnGoodsInfo, // 配送商-退货管理-订单详情
  returnGoodsItemDetail // 配送商-退货管理-订单明细详情带分页
} from '@const/beforeSettleApi'
import ElEditable from '@components/el-editable'
import { cloneDeep, isObject, hasIn } from 'lodash'
import { formatPrice, regisNoButton, showPdfRegistion } from '@const/agencySaas'
import { getFormatterPrice } from '@const/filter'
export default {
  components: { ElEditable, Pagination, ReadForm },
  data () {
    return {
      id: this.$route.query.id,
      orderStatus: null,
      // 表格Loading
      tableLoading: false,
      returnGoodsNoRedTableColumns,
      returnGoodsRedTableColumns,
      // 表单 详情展示内容-table
      returnGoodsList: [],
      // 订单详情信息
      headerInfo: {},
      returnGoodsInfoColumns,
      orderType: null,
      invoiceFlag: null
    }
  },
  filters: {
    getFormatterPrice
  },
  computed: {
    isRed () {
      // 1.orderStatus:4-已完成 2.orderType:3，4-采购（类型还未定） 3.invoiceFlag: 1-开红票
      const isRed = [4].includes(this.orderStatus) && [3, 4].includes(this.orderType) && [1].includes(this.invoiceFlag)
      return isRed
    },
    activeTableColumns () {
      return this.isRed ? this.returnGoodsRedTableColumns : this.returnGoodsNoRedTableColumns
    }
  },
  mounted () {
    this.getBaseInfo()
  },
  methods: {
    formatPrice,
    regisNoButton,
    showPdfRegistion,
    // 列表请求方法
    getList () {
      this.tableLoading = true
      const body = {
        id: this.id,
        ...this.$refs.page.page
      }
      return this.$axios.$post(returnGoodsItemDetail, body)
    },
    // 列表请求方法
    getTableData (data) {
      this.returnGoodsList = data
      this.tableLoading = false
    },
    // 基本信息请求方法
    async getBaseInfo () {
      this.tableLoading = true
      const body = {
        id: this.id
      }
      const data = await this.$axios.$post(returnGoodsInfo, body)
      const baseInfo = hasIn(data, 'payload') ? data.payload : {}
      Object.keys(baseInfo).forEach(key => {
        // 订单状态不展示
        if (key === 'orderStatus') {
          this.orderStatus = baseInfo[key]
          baseInfo[key] = statusArr[baseInfo[key]]
        }
        // 订单类型
        if (key === 'orderType') {
          this.orderType = baseInfo[key]
          baseInfo[key] = orderTypeData[baseInfo[key]]
        }
        // 是否开红票
        if (key === 'invoiceFlag') {
          this.invoiceFlag = baseInfo[key]
          baseInfo[key] = invoiceFlagObj[baseInfo[key]]
        }
        const type = typeof baseInfo[key]
        const value = ['number'].includes(type) ? baseInfo[key] : (baseInfo[key] || '--')
        this.$set(this.headerInfo, key, value)
      })
    }
  }
}
</script>

<style lang="less">
.return-goods-box {
  .partDetails {
    height: 100%;
    .custom-info {
      margin: 0;
      height: auto;
    }
  }
}
</style>
